<template>
  <div class="home-page">
    <van-panel v-for="i in list" :key="i.messageID" title="通知" :status="i.isRead === 1?'已读':'未读'">
      <div class="message-content">
        <div class="row">消息内容: {{i.content}}</div>
        <div class="row">消息类型: {{do_Type_Arr[i.messageType]}}</div>
        <div class="row">接收者: {{i.receiver}}</div>
        <div class="row">发送者: {{i.sender}}</div>
        <!-- <van-tag>小王学英语</van-tag> -->
      </div>
      <div slot="footer" class="flex-row">
        <p class="time">{{i.createTime}}</p>
        <van-button size="small" @click="link(i)">查看消息</van-button>
      </div>
    </van-panel>
    <tabbar :active="1"></tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
import { getMyMessages } from '@/api'
import mixin from '@/mixin'
export default {
  name: 'message',
  mixins: [mixin],
  components: {
    Tabbar
  },
  data() {
    return {
      list: [],
      do_Type_Arr:[
        "推广员申请",
        "推广员申请驳回",
        "推广员申请审核通过",
        "推广的商品有购买意向提交",
        "推广的商品已经退款",
        "用户购买商品成功",
        "用户退款成功",
        "用户团购成功",
        "用户团购失败"
      ],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getMyMessages().then(res => {
        this.list = res
      })
    },
    link(i) {
      // this.$router.push(`/message-detail/${id}`)
      console.log(i);
      this.$router.push({
        path: `/message-detail/${i.messageID}`,
        query: {
          detail:i
        }
      })

      // this.$router.push(`/message-detail/${i.messageId}`,{
      //   "detail": i
      // })
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.van-panel 
  margin-bottom 6px
  .message-content
    padding 15px
    font-size 16px
    line-height 26px
    color #333333
  .time
    font-size 12px
    color #888888
.van-tag
  font-size 12px
  line-height 12px
  padding 4px 6px
  vertical-align top
  margin-top 3px
</style>
